import React from 'react';
import Spinner from "react-native-loading-spinner-overlay";
import {useStore} from "@/store";
import {useTheme} from "@/hooks";
import Spinkit from "react-native-spinkit";

const KSpinner = () => {
    const showSpinner = useStore.use.showSpinner();
    const content = useStore.use.loadingText();
    const {colors, fontSizes} = useTheme();

    return (
        <Spinner
            visible={showSpinner}
            textContent={content}
            overlayColor={"rgba(0, 0, 0, 0.5)"}
            customIndicator={
                <Spinkit
                    isVisible={showSpinner}
                    size={50}
                    type={"Circle"}
                    color={"#fff"}
                />
            }
            textStyle={{
                fontSize: fontSizes.sm,
                color: colors.white,
                marginTop: -30
            }}
        />
    );
};

export default KSpinner;